﻿@using TamoCRM.Core
@using TamoCRM.Domain.StatusCare

@model TamoCRM.Web.Mvc.Areas.Admin.Models.Contacts.ContactCreateModel

@{
    ViewBag.Title = "Danh sách contact";
    Layout = "~/Areas/Admin/Views/Shared/_Layout.cshtml";
}

@{
    var lstMajors = ViewBag.Majors;
    var lstSchools = ViewBag.Schools;
    var lstLevels = ViewBag.LevelWithContactCount;

    var statusCares = ViewBag.StatusCares;
    ((List<StatusCareInfo>)statusCares).RemoveAll(c => c.Id == 0);
    ((List<StatusCareInfo>)statusCares).Insert(0, new StatusCareInfo { Id = 0, Name = "Tất cả" });
    var lstStatusCares = new SelectList(statusCares, "Id", "Name");

    var statusMaps = ViewBag.StatusMaps;
    var lstStatusMaps = new SelectList(statusMaps, "Id", "Name");

    var lstEducationLevels = ViewBag.EducationLevels;
}

<div class="breadcrumbs" id="breadcrumbs">
    <script type="text/javascript">
        try {
            ace.settings.check('breadcrumbs', 'fixed');
        }
        catch (e) {

        }
    </script>

    <ul class="breadcrumb">
        <li>
            <i class="icon-home home-icon"></i>
            <a href="/Home">Trang chủ</a>
        </li>

        <li>
            <a href="javascript:void(0);">Danh mục</a>
        </li>
        <li class="active">Contact</li>
    </ul>
</div>

<div class="page-content">
    <div class="page-header">
        <h1>Danh sách contact</h1>
    </div>
    <!-- /.page-header -->

    <div class="row">
        <div class="col-xs-12">
            <!-- PAGE CONTENT BEGINS -->
            @using (Ajax.BeginForm("FilterContactSearchAdvance", "Contact", new AjaxOptions { HttpMethod = "POST" }, new { enctype = "multipart/form-data", @class = "form-horizontal", role = "form", id = "filter_contact_search_advance" }))
            {
                @Html.AntiForgeryToken()
                <div class="form-group">
                    <div class="col-sm-12" id="alert">
                    </div>
                </div>
                <div style="border-bottom: 1px solid #c5d0dc; padding: 0 0 15px 0;">
                    <div class="form-group">
                        <div class="col-sm-2">
                            <label class="bolder">Ngày bàn giao</label>
                        </div>
                        <div class="col-sm-2">
                            @Html.TextBox("HandoverDate", string.Empty, new { @class = "form-control" })
                        </div>
                        <div class="col-sm-1"></div>
                        <div class="col-sm-2">
                            <label class="bolder">Trạng thái chăm sóc</label>
                        </div>
                        <div class="col-sm-3">
                            @Html.DropDownList("ddlStatusCare", lstStatusCares, new { @class = "form-control" })
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-2">
                            <label class="bolder">Ngày gọi gần nhất</label>
                        </div>
                        <div class="col-sm-2">
                            @Html.TextBox("CallDate", string.Empty, new { @class = "form-control" })
                        </div>
                        <div class="col-sm-1"></div>
                        <div class="col-sm-2">
                            <label class="bolder">Trạng thái gọi</label>
                        </div>
                        <div class="col-sm-3">
                            @Html.DropDownList("ddlStatusMap", lstStatusMaps, new { @class = "form-control" })
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-2">
                            <label class="bolder">Level</label>
                        </div>
                        <div class="col-sm-1">
                            <input type="checkbox" id='chkLevels' checked />
                            <label>Tất cả</label>
                        </div>
                        @foreach (var item in lstLevels)
                        {
                            if (item.LevelId <= 5)
                            {
                            <div class="col-sm-2" style="width: 10%;">
                                <input type="checkbox" name='chkLevels' id='@(item.LevelId)_chkLevel' />
                                <label for="@(item.LevelId)_chkLevel">@item.Name (@item.ContactCount)</label>
                            </div>
                            }
                        }
                    </div>
                    <div class="row">
                        <div class="col-sm-2"></div>
                        <div class="col-sm-1"></div>
                        @foreach (var item in lstLevels)
                        {
                            if (item.LevelId > 5)
                            {
                            <div class="col-sm-2" style="width: 10%;">
                                <input type="checkbox" name='chkLevels' id='@(item.LevelId)_chkLevel' />
                                <label for="@(item.LevelId)_chkLevel">@item.Name (@item.ContactCount)</label>
                            </div>
                            }
                        }
                    </div>
                    <div class="space-6"></div>
                    <div class="form-group">
                        <div class="col-sm-2">
                            <label class="bolder">Đối tượng</label>
                        </div>
                        <div class="col-sm-1">
                            <input type="checkbox" id='chkEducationLevels' checked />
                            <label>Tất cả</label>
                        </div>
                        @foreach (var item in lstEducationLevels)
                        {
                            <div class="col-sm-1" style="width: 10%;">
                                <input type="checkbox" name='chkEducationLevels' id='@(item.EducationLevelId)_chkEducationLevel' />
                                <label for="@(item.EducationLevelId)_chkEducationLevel">@item.Name</label>
                            </div>
                        }
                    </div>
                    <div class="form-group">
                        <div class="col-sm-2">
                            <label class="bolder">Trường</label>
                        </div>
                        <div class="col-sm-1">
                            <input type="checkbox" id='chkSchools' checked />
                            <label>Tất cả</label>
                        </div>
                        @foreach (var item in lstSchools)
                        {
                            if (@item.Name.Length > 4)
                            {
                            <div class="col-sm-2" style="width: 10%;">
                                <input type="checkbox" name='chkSchools' id='@(item.SchoolId)_chkSchool' />
                                <label for="@(item.SchoolId)_chkSchool">@item.Name</label>
                            </div>
                            }
                            else
                            {
                            <div class="col-sm-1" style="width: 10%;">
                                <input type="checkbox" name='chkSchools' id='@(item.SchoolId)_chkSchool' />
                                <label for="@(item.SchoolId)_chkSchool">@item.Name</label>
                            </div>
                            }
                        }
                    </div>
                    <div class="form-group">
                        <div class="col-sm-2">
                            <label class="bolder">Ngành</label>
                        </div>
                        <div class="col-sm-1">
                            <input type="checkbox" id='chkMajors' checked />
                            <label>Tất cả</label>
                        </div>
                        @foreach (var item in lstMajors)
                        {
                            if (@item.Name.Length > 4)
                            {
                            <div class="col-sm-2" style="width: 10%;">
                                <input type="checkbox" name='chkMajors' id='@(item.MajorId)_chkMajor' />
                                <label for="@(item.MajorId)_chkMajor">@item.Name</label>
                            </div>
                            }
                            else
                            {
                            <div class="col-sm-1" style="width: 10%;">
                                <input type="checkbox" name='chkMajors' id='@(item.MajorId)_chkMajor' />
                                <label for="@(item.MajorId)_chkMajor">@item.Name</label>
                            </div>
                            }
                        }
                    </div>
                </div>
            }

            <div class="space-6"></div>
            <button id="btnGoFilter" class="btn-primary" style="float: right;">Lọc Contact</button>
            <div class="clearfix"></div>

            <div class="space-6"></div>
            <table id="grid-table"></table>
            <div id="grid-pager"></div>

            <!-- PAGE CONTENT ENDS -->
        </div>
        <!-- /.col -->
    </div>
    <!-- /.row -->
</div>

<script type="text/javascript">
    var url = 'admin/api/contact/filtersearchadvance?userId={0}&statusMapId={1}&statusCareId={2}&levels={3}&educationlevels={4}&schools={5}&majors={6}&branchId={7}&handoverDate={8}&callDate={9}';
    var grid_selector = "#grid-table";
    var heades = ['Id', 'Họ và tên', 'Level', 'Email', 'Ngày', 'Sáng/Chiều', 'Giờ', 'Nội dung cuộc gọi gần nhất', 'Trạng thái chăm sóc', 'Tổng số cuộc gọi', 'Chức năng'];
    var model = [
        { name: 'Id', index: 'Id', editable: false, sorttype: 'string', editoptions: { disabled: true }, width: '0px' },
        { name: 'Fullname', index: 'Fullname', editable: false, width: '90px', sorttype: 'string' },
        { name: 'LevelId', index: 'LevelId', editable: false, width: '40px', sorttype: 'string', align: 'center', formatter: levelFomatter },
        { name: 'Email', index: 'Email', editable: false, width: '70px', sorttype: 'string', align: 'center' },
        { name: 'AppointmentDate', index: 'AppointmentDate', editable: false, width: '60px', align: 'center', formatter: 'date', formatoptions: { srcformat: 'Y-m-dTH:i:s', newformat: 'd/m/Y' } },
        { name: 'AppointmentAmPm', index: 'AppointmentDate', editable: false, width: '70px', align: 'center', formatter: stringFormatter },
        { name: 'AppointmentTime', index: 'AppointmentDate', editable: false, width: '40px', align: 'center', formatter: 'date', formatoptions: { srcformat: 'Y-m-dTH:i:s', newformat: 'H:i' } },
        { name: 'CallInfo', index: 'CallInfo', editable: false, width: '200px', sorttype: 'string', align: 'left' },
        { name: 'StatusCareId', index: 'StatusCareId', editable: false, width: '120px', formatter: statusCareFomatter },
        { name: 'CallAmount', index: 'CallAmount', editable: false, width: '60px', align: 'center' },
        { name: 'Function', index: 'Function', editable: false, width: '55px', align: 'center', formatter: "dynamicLink",
            formatoptions: {
                cellValue: function (cellValue, rowId, rowData, options) {
                    var groupType = '@ViewBag.GroupType';
                    if (groupType == '@((int)GroupType.ManagerTVTS)') {
                        return '<div style="color:#810c15;margin:5px; float:left;"><a style="cursor: pointer;" onclick="return openDialog(' + rowData.Id + ')"><img style="width:16px; height:16px;" src="../../../../Images/edit-16.png"/></a></div>' +
                            '<div style="color:#810c15;margin:5px; float:left;"><a href="" onclick="return deleteClick(' + rowData.Id + ');">   <img style="width:16px; height:16px;" src="../../../../Images/delete-16.png"/></a></div>' +
                            '<div style="clear: both;"></div>';
                    } else {
                        return '<div style="color:#810c15;margin:5px;"><a style="cursor: pointer;" onclick="return openDialog(' + rowData.Id + ')"><img style="width:16px; height:16px;" src="../../../../Images/edit-16.png"/></a></div>';
                    }
                }
            }
        }
    ];
        
        function deleteClick(id) {
            var r = confirm("Có phải bạn muốn xóa contact này?");
            if (r == true) {
                var newUrl = "/admin/api/contact/delete/{0}".format(id);
                $.ajax({
                    type: 'GET',
                    url: newUrl,
                    success: function (data) {
                        jQuery(grid_selector).jqGrid().trigger("reloadGrid");
                    },
                    error: function (request, status, ex) {
                        $("#alert").addClass("alert alert-block alert-error");
                        $("#alert").html("Xóa contact không thành công.");
                    }
                });
            }
            return false;
        }
        $(document).ready(function () {
            loadStatusMap2();
            $('#CallDate').datepicker({ format: 'dd/mm/yyyy', autoclose: true, dateonly: true, endDate: "+1d" });
            $('#HandoverDate').datepicker({ format: 'dd/mm/yyyy', autoclose: true, dateonly: true, endDate: "+1d" });

            var userId = '@ViewBag.UserId';
            var branchId = '@ViewBag.BranchId';
            setupGridWithoutEdit("#grid-table", "#grid-pager", url.format('', '', '', '', '', '', '', branchId, '', ''), "admin/api/contact/edit", "Id", "Danh sách Contact", heades, model);
            $(grid_selector).jqGrid("setGroupHeaders", {
                useColSpanStyle: true,
                groupHeaders: [
                    { startColumnName: "Fullname", numberOfColumns: 3, titleText: '<table style="width:100%;border-spacing:0px;"><tr><td style="text-align:center;height:40px;"><b>Thông tin Contact</b></td></tr></table>' },
                    { startColumnName: "AppointmentDate", numberOfColumns: 3, titleText: '<table style="width:100%;border-spacing:0px;"><tr><td style="text-align:center;"><b>Thông tin lịch hẹn gọi lại</b></td></tr></table>' },
                    { startColumnName: "CallInfo", numberOfColumns: 2, titleText: '<table style="width:100%;border-spacing:0px;"><tr><td style="text-align:center;"><b>Tình trạng chăm sóc</b></td></tr></table>' }
                ]
            });
            $("#btnGoFilter").click(function (e) {
                e.preventDefault();

                // Param
                var callDate = $('#CallDate').val();
                var statusMapId = $('#ddlStatusMap').val();
                var handoverDate = $('#HandoverDate').val();
                var statusCareId = $('#ddlStatusCare').val();
                var levels = $('#chkLevels').is(':checked') ? '' : buildParamLevels();
                var majors = $('#chkMajors').is(':checked') ? '' : buildParamMajors();
                var schools = $('#chkSchools').is(':checked') ? '' : buildParamSchools();
                var educationLevels = $('#chkEducationLevels').is(':checked') ? '' : buildParamEducationLevels();

                // Format Url
                var newUrl = '/' + url.format(userId, statusMapId, statusCareId, levels, educationLevels, schools, majors, branchId, handoverDate, callDate);
                jQuery(grid_selector).jqGrid().setGridParam({ url: newUrl }).trigger("reloadGrid");
            });

            // StatusCare
            $("#ddlStatusCare").change(function () {
                loadStatusMap2();
            });

            $('#chkLevels').change(function () {
                if ($('#chkLevels').is(':checked')) {
                    var elements = document.getElementsByName('chkLevels');
                    for (var i = 0; i < elements.length; i++) {
                        $(elements[i]).attr('checked', false);
                    }
                }
            });
            $('input[name="chkLevels"]').change(function () {
                if ($(this).is(':checked')) $('#chkLevels').attr('checked', false);
            });

            $('#chkEducationLevels').change(function () {
                if ($('#chkEducationLevels').is(':checked')) {
                    var elements = document.getElementsByName('chkEducationLevels');
                    for (var i = 0; i < elements.length; i++) {
                        $(elements[i]).attr('checked', false);
                    }
                }
            });
            $('input[name="chkEducationLevels"]').change(function () {
                if ($(this).is(':checked')) $('#chkEducationLevels').attr('checked', false);
            });

            $('#chkSchools').change(function () {
                if ($('#chkSchools').is(':checked')) {
                    var elements = document.getElementsByName('chkSchools');
                    for (var i = 0; i < elements.length; i++) {
                        $(elements[i]).attr('checked', false);
                    }
                }
            });
            $('input[name="chkSchools"]').change(function () {
                if ($(this).is(':checked')) $('#chkSchools').attr('checked', false);
            });

            $('#chkMajors').change(function () {
                if ($('#chkMajors').is(':checked')) {
                    var elements = document.getElementsByName('chkMajors');
                    for (var i = 0; i < elements.length; i++) {
                        $(elements[i]).attr('checked', false);
                    }
                }
            });
            $('input[name="chkMajors"]').change(function () {
                if ($(this).is(':checked')) $('#chkMajors').attr('checked', false);
            });
        });

</script>
